<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '../utils/request'
import { useAuthStore } from "@/stores/auth.js"
import NavBar from '@/components/NavBar.vue'

const router = useRouter()
const authStore = useAuthStore()
const isDropdownOpen = ref(false)

// 处理返回首页
const handleHomeClick = () => {
  router.push('/')
}
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-purple-50 via-indigo-50 to-blue-50 text-gray-900 overflow-x-hidden">
    <!-- 导航栏 -->
    <NavBar />

    <!-- 主要内容 -->
    <main>
      <!-- Hero Section -->
      <div class="relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 -z-10">
          <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_120%,rgba(121,40,202,0.1),rgba(79,70,229,0.1))]"></div>
          <div class="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/20 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
          <div class="absolute top-0 right-1/4 w-96 h-96 bg-indigo-500/20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
          <div class="absolute bottom-0 left-1/3 w-96 h-96 bg-blue-500/20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 relative">
          <div class="text-center">
            <h1 class="text-5xl md:text-6xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600">
              ZiYue - 未明子AI计划
            </h1>
            <p class="text-xl md:text-2xl mb-8 text-gray-700 max-w-3xl mx-auto">
              集众智，汇群力，共创AI未明子。通过分布式协作，让哲学思想焕发新生。
            </p>
            <div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto mb-12">
              <div class="bg-white/40 backdrop-blur-sm p-6 rounded-xl shadow-xl shadow-purple-500/5 hover:shadow-purple-500/10 transition-all duration-300 transform hover:-translate-y-1">
                <div class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 font-semibold mb-2">内容整理</div>
                <p class="text-gray-600">将未明子的视频、文章转化为结构化文字，建立知识库基础。</p>
              </div>
              <div class="bg-white/40 backdrop-blur-sm p-6 rounded-xl shadow-xl shadow-indigo-500/5 hover:shadow-indigo-500/10 transition-all duration-300 transform hover:-translate-y-1">
                <div class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600 font-semibold mb-2">多级校对</div>
                <p class="text-gray-600">通过三级校对机制，让晦涩难懂的哲学概念变得清晰易懂。</p>
              </div>
              <div class="bg-white/40 backdrop-blur-sm p-6 rounded-xl shadow-xl shadow-blue-500/5 hover:shadow-blue-500/10 transition-all duration-300 transform hover:-translate-y-1">
                <div class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600 font-semibold mb-2">分布式AI</div>
                <p class="text-gray-600">共享算力，集体训练，打造属于所有人的AI未明子。</p>
              </div>
            </div>
            <div class="flex justify-center space-x-4">
              <template v-if="!isLoggedIn">
                <router-link
                  to="/login"
                  class="px-8 py-3 rounded-lg bg-gradient-to-r from-purple-600 to-indigo-600 text-white hover:opacity-90 transition-all transform hover:scale-105 shadow-lg shadow-purple-500/20"
                >
                  加入我们
                </router-link>
              </template>
              <template v-else>
                <router-link
                  to="/index"
                  class="px-8 py-3 rounded-lg bg-gradient-to-r from-purple-600 to-indigo-600 text-white hover:opacity-90 transition-all transform hover:scale-105 shadow-lg shadow-purple-500/20"
                >
                  开始贡献
                </router-link>
              </template>
              <a
                href="#features"
                class="px-8 py-3 rounded-lg border border-purple-300 text-purple-600 hover:bg-purple-50 transition-all transform hover:scale-105 shadow-lg shadow-purple-500/10"
              >
                了解更多
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- 特性部分 -->
      <div id="features" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 relative">
        <div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/50 to-transparent"></div>
        <h2 class="text-3xl font-bold text-center mb-16 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600 relative">
          项目特色
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
          <!-- 协作校对 -->
          <div class="p-6 rounded-2xl bg-white/60 backdrop-blur-sm border border-purple-100/20 shadow-xl shadow-purple-500/5 transform transition-all hover:-translate-y-1 hover:shadow-purple-500/10">
            <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-2 text-indigo-600">三级校对机制</h3>
            <p class="text-gray-600">通过初校、复校、终校三个层级，确保内容的准确性和可理解性。每一级校对都由经验丰富的哲学爱好者完成。</p>
          </div>

          <!-- 分布式计算 -->
          <div class="p-6 rounded-2xl bg-white/60 backdrop-blur-sm border border-indigo-100/20 shadow-xl shadow-indigo-500/5 transform transition-all hover:-translate-y-1 hover:shadow-indigo-500/10">
            <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-2 text-blue-600">共享算力</h3>
            <p class="text-gray-600">用户可以贡献闲置的计算资源，参与AI模型的训练。通过分布式计算，让每个参与者都成为项目的重要一员。</p>
          </div>

          <!-- 知识沉淀 -->
          <div class="p-6 rounded-2xl bg-white/60 backdrop-blur-sm border border-blue-100/20 shadow-xl shadow-blue-500/5 transform transition-all hover:-translate-y-1 hover:shadow-blue-500/10">
            <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-2 text-indigo-600">智慧传承</h3>
            <p class="text-gray-600">通过AI技术，让未明子的哲学思想得以传承和发展，使深奥的哲学概念更容易被理解和传播。</p>
          </div>
        </div>
      </div>

      <!-- 工作流程 -->
      <div class="relative">
        <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-50/50 to-transparent"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 relative">
          <h2 class="text-3xl font-bold text-center mb-16 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600">
            参与流程
          </h2>
          <div class="relative">
            <div class="absolute top-1/2 left-0 w-full h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-blue-500 transform -translate-y-1/2 opacity-20"></div>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div class="relative">
                <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-indigo-500"></div>
                <div class="pt-8 text-center">
                  <h3 class="text-lg font-semibold mb-2 text-indigo-600">内容提交</h3>
                  <p class="text-sm text-gray-600">提交未明子相关的视频文章转写稿</p>
                </div>
              </div>
              <div class="relative">
                <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-indigo-400"></div>
                <div class="pt-8 text-center">
                  <h3 class="text-lg font-semibold mb-2 text-indigo-600">多级校对</h3>
                  <p class="text-sm text-gray-600">经过三级校对，确保内容质量</p>
                </div>
              </div>
              <div class="relative">
                <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-blue-400"></div>
                <div class="pt-8 text-center">
                  <h3 class="text-lg font-semibold mb-2 text-blue-600">AI训练</h3>
                  <p class="text-sm text-gray-600">利用校对后的内容训练AI模型</p>
                </div>
              </div>
              <div class="relative">
                <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-blue-500"></div>
                <div class="pt-8 text-center">
                  <h3 class="text-lg font-semibold mb-2 text-blue-600">知识传播</h3>
                  <p class="text-sm text-gray-600">AI助力哲学思想传播</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white/20 backdrop-blur-sm border-t border-purple-100/20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="text-center text-sm text-gray-600">
          <p>© 2024 ZiYue. 共建AI未明子</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style>
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* 自定义下拉菜单样式 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none;
}

/* 美化选项样式 */
select option {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-color: white;
}

select option:first-child {
  font-weight: 500;
  color: #6B7280;
}

select option:checked {
  background-color: #EEF2FF;
  color: #4F46E5;
}

select option:hover {
  background-color: #EEF2FF;
}

/* 在Firefox中自定义选项样式 */
@-moz-document url-prefix() {
  select {
    color: #4F46E5;
    background-color: transparent;
  }

  select:hover {
    color: #6366F1;
  }
}

/* 在Webkit浏览器中自定义选项样式 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select {
    color: #4F46E5;
    background-color: transparent;
  }

  select:hover {
    color: #6366F1;
  }
}

/* 防止水平滚动 */
body {
  overflow-x: hidden;
}
</style>
